<template>
    <table>
        <thead>
            <tr>
                <th v-for="title in tableHead" :key='title.id'>{{title.cName}}</th>
            </tr>
        </thead>

        <tbody>
            <tr v-for="trData in tableData" :key="trData.id">
                <td width="150px"><div class="cell">{{trData[tableHead[0].marking]}}</div></td>
                <td width="400px"><div class="cell">{{trData[tableHead[1].marking]}}</div></td>
                <td width="100px">
                    <a href="javascript:void(0);" :data-id="trData.id" @click="editRole(trData.id,'edit')" class="icon-edit edit"></a>
                    <a href="javascript:void(0);" :data-id="trData.id" @click="deleteRole(trData.id,'del')" class="icon-del del"></a>
                </td>
            </tr>
        </tbody>
    </table>
</template>
<script>
export default {
    props: ['tableData','tableHead'],
    data () {
        return {

        }
    },
    mounted() {

    },
    methods: {
        // 删除角色
        deleteRole(id,types){
            this.$emit('del',[id,types])
        },
        // 编辑角色
        editRole(id,types){
            this.$emit('show',[id,types])
        },
    },
    components:{
    }
}
</script>
<style scoped>
table,tr,td{
    border: 1px solid #dadada;
    color: #666;
}
table{
    width: 100%;
}
td{
    text-align: center;
    vertical-align: middle;
}
thead th{
    text-align: center;
    font-weight: bold;
    background: #fbfbfb;
}
tbody tr:nth-child(2n) td{
    background: #f9f9f9;
}
.cell{
    width: 100%;
    line-height: 24px;
    padding: 5px 10px;
    overflow: auto;
}
</style>